<template>
    <el-container class="org">
        <el-card class="ep-card" style="width: 300px;">
            <el-input
                v-model="filterText"
                placeholder="请输入">
                <i
                class="el-icon-search el-input__icon"
                slot="suffix">
            </i>
            </el-input>
            <el-scrollbar style="height: 430px;width: 194px">
                <el-tree
                    class="filter-tree"
                    :data="orgTreeData"
                    :props="defaultProps"
                    :expand-on-click-node=false
                    highlight-current
                    :filter-node-method="filterNode"
                    @node-click="nodeClick"
                    ref="tree"> <!--accordion-->
                </el-tree>
            </el-scrollbar>
        </el-card>
        <el-card class="ep-card" style="margin-left: 10px;width: 100%;">
            <div slot="header" class="clearfix">
                <el-button style="float: right; margin-right: 10px" type="primary" @click=" delOrg()" size="small">删除</el-button>
                <el-button style="float: right; margin-right: 10px" type="primary" @click="saveOrg" size="small">保存</el-button>
                <el-button style="float: right; margin-right: 10px" size="small" @click="addOrg">+ 添加机构</el-button>
            </div>
            <!--<div slot="header" class="clearfix" style=" display: flex;align-items: center;justify-content: space-between;">
                <span></span>
                <div>
                    <el-button style="float: right; margin-right: 10px" type="primary" size="small">保存</el-button>
                    <el-button style="float: right; margin-right: 10px" size="small">+ 添加机构</el-button>
                </div>
            </div>-->
            <el-form ref="form" :model="form" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="机构名称" label-width="100px" prop="orgname">
                            <el-input v-model="form.orgname" type="text" name="orgname" placeholder="请输入机构名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机构代码" label-width="100px" prop="orgentercode">
                            <el-input v-model="form.orgentercode" type="text" name="orgentercode" placeholder="请输入机构代码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机构简称" label-width="100px" prop="shortname">
                            <el-input v-model="form.shortname" type="text" name="shortname" placeholder="请输入机构简称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="行政区划" label-width="100px">
                            <el-select v-model="form.regioncode" style="width: 100%">
                                <el-option v-for="item in AA26" :key="item.key" :label="item.value" :value="item.key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人" label-width="100px">
                            <el-input v-model="form.linkman" type="text" name="linkman" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                    </el-col>
                        <el-col :span="8">
                            <el-form-item label="机构负责人" label-width="100px">
                                <el-input v-model="form.leader" type="text" name="leader" placeholder="请输入机构负责人"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="同级序号" label-width="100px">
                            <el-input v-model="form.orgorder" type="text" name="orgorder" placeholder="请输入同级序号"></el-input>
                        </el-form-item>
                    </el-col>
                        <el-col :span="8">
                            <el-form-item label="邮政编码" label-width="100px">
                                <el-input v-model="form.zip" type="text" name="zip" placeholder="请输入邮编"></el-input>
                            </el-form-item>
                        </el-col>
                    <el-col :span="8">
                        <el-form-item label="主管部门" label-width="100px">
                            <el-input v-model="form.superdept" type="text" name="superdept" placeholder="请输入主管部门"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="24">
                        <el-form-item label="机构地址" label-width="100px">
                            <el-input v-model="form.orgaddr" type="text" name="orgaddr" placeholder="请输入机构地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="机构描述" label-width="100px">
                            <el-input v-model="form.orgdesc" type="textarea" name="orgdesc" placeholder="请输入机构描述" rows="4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="请选择险种" label-width="100px">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix myheader">
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                </div>
                                <!--<div class="el-card__header">
                                    <div class="clearfix">
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    </div>
                                </div>-->
                                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="city in codeTypes.AAE140" :label="city.key" :key="city.key">{{city.value}}</el-checkbox>
                                </el-checkbox-group>
                            </el-card>
                            <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>-->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </el-container>
</template>

<script type="es6">
    import Vue from 'vue';
    const cityOptions = ['机关养老', '职工养老', '城乡居民养老', '医疗', '工伤', '生育', '失业', '职业年金', '企业年金'];
    export default {
        data() {
            return {
                form: {
                    orgid: '',
                    orgname: '',
                    orgentercode: '',
                    parentid: '',
                    shortname: '',
                    regioncode:"",
                    leader: '',
                    linkman: '',
                    tel: '',
                    orgaddr: '',
                    orgdesc: '',
                    orgorder: '',
                    orgstate: '',
                    superdept: '',
                    orgautocode: '',
                    zip: '',
                    idpath:""
                },
                AA26:[],
                codeTypes: {
                    AAE140:[]
                },
                rules: {
                    orgname: [
                        { required: true, message: '请输入机构名称', trigger: 'blur' }
                    ],
                    orgentercode: [
                        { required: true, message: '请输入机构代码', trigger: 'blur' }
                    ],
                    shortname: [
                        { required: true, message: '请输入机构简称', trigger: 'blur' }
                    ]
                },
                checkAll: false,
                checkedCities: ['1', '2'],
                cities: cityOptions,
                isIndeterminate: true,
                filterText: '',
                orgTreeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'orgname'
                },
                path: this.$store.getters.path
            };
        },
        mounted() {
            this.initCodeTypes();
            this.doInit();
            this.initAA26();
        },
        watch: {
            filterText(val) {
                let _this=this;
                _this.$refs.tree.filter(val);
            }
        },
        methods: {
            doInit() {
                let _this=this;
                _this.$api.commonPost(this.path + "/doInit", null).then(res => {
                    _this.handleMessage(res);
                    if(res.status === "0") {
                        console.info(res);
                        _this.orgTreeData = res.data;
                    }
                });
            },
            initCodeTypes() {
                let _this=this;
                let params = _this.codeTypes;
                _this.$api.commonPost(this.$store.getters.path + "/initCodeTypes", params).then(res => {
                    if(res.status === "0") {
                        console.info("codeType初始化");
                        console.info(res);
                        _this.codeTypes = res.data;
                        console.info(_this.codeTypes);
                    }
                });

            },
            initAA26(){
                let _this=this;
                _this.$api.commonPost(this.$store.getters.path + "/initAA26").then(res => {
                    if(res.status === "0") {
                        console.info("AA26初始化");
                        console.info(res);
                        _this.AA26 = res.data;
                        console.info(_this.AA26);
                    }
                });
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            nodeClick(data, node) {
                console.log("传入的data数据");
                console.log(data);
                console.log("传入的node数据")
                console.log(node);
                let _this=this;
                let params ={
                   orgid:data.orgid
                }
                _this.$api.commonPost(this.$store.getters.path + "/findOrgById", params).then(res => {
                    if(res.status === "0") {
                            _this.form.orgid=res.data.orgid;
                            _this.form.orgname=res.data.orgname;
                            _this.form.orgentercode=res.data.orgentercode;
                            _this.form.parentid=res.data.parentid;
                        if (res.data.shortname!=null){
                            _this.form.shortname=res.data.shortname;
                        }
                        if (res.data.regioncode!=null){
                            _this.form.regioncode=res.data.regioncode;
                        }
                        if (res.data.leader!=null){
                            _this.form.leader=res.data.leader;
                        }
                        if (res.data.linkman!=null){
                            _this.form.linkman=res.data.linkman;
                        }
                        if (res.data.tel!=null){
                            _this.form.tel=res.data.tel;
                        }
                        if (res.data.orgaddr!=null){
                            _this.form.orgaddr=res.data.orgaddr;
                        }
                        if (res.data.orgdesc!=null){
                            _this.form.orgdesc=res.data.orgdesc;
                        }
                        if (res.data.orgorder!=null){
                            _this.form.orgorder=res.data.orgorder;
                        }
                        if (res.data.orgstate!=null){
                            _this.form.orgstate=res.data.orgstate;
                        }
                        if (res.data.superdept!=null){
                            _this.form.superdept=res.data.superdept;
                        }
                        if (res.data.orgautocode!=null){
                            _this.form.orgautocode=res.data.orgautocode;
                        }
                        if (res.data.zip!=null){
                            _this.form.zip=res.data.zip;
                        }
                        if (res.data.idpath!=null){
                            _this.form.idpath=res.data.idpath;
                        }
                    }else{
                        Vue.prototype.$message.error("出现错误");
                    }
                });
                //查找拥有的险种
                _this.$api.commonPost(this.$store.getters.path + "/findInsTypeById", params).then(res => {
                    if(res.status === "0") {
                        console.info("险种")
                        console.info(res.data)
                        _this.checkedCities=res.data;
                    }else{
                        Vue.prototype.$message.error("查找险种错误");
                    }
                });
            },
            addOrg(){
                let _this=this;
                _this.form.parentid=_this.form.orgid;
                _this.form.orgid="";
                _this.form.orgname="";
                _this.form.orgentercode="";
                _this.form.shortname="";
                _this.form.regioncode=_this.form.regioncode;
                _this.form.leader="";
                _this.form.linkman="";
                _this.form.tel="";
                _this.form.orgaddr="";
                _this.form.orgdesc="";
                _this.form.orgorder="";
                _this.form.orgstate="";
                _this.form.superdept="";
                _this.form.orgautocode="";
                _this.form.zip="";
                _this.form.idpath="";
                _this.checkedCities=['1', '2'];
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            handleMessage(res) {
                if (res.status === '0') {
                    if (res.message !== null) {
                        Vue.prototype.$message.success(res.message);
                    }
                } else if (res.status === '1' && res.message !== null) {
                    Vue.prototype.$message.warning(res.message);
                } else if (res.status === '9' && res.message !== null) {
                    Vue.prototype.$message.error(res.message);
                }
            },
            saveOrg(){
                let _this=this;
                let params={
                    form:_this.form,
                    checkedCities:_this.checkedCities
                }
                _this.$api.commonPost(this.$store.getters.path + "/saveOrg", params).then(res => {
                    if(res.status === "0") {
                        Vue.prototype.$message.success("保存成功");
                        this.doInit();
                    }else if(res.status === "9"){
                        Vue.prototype.$message.error("机构名称或机构代码重复");
                    }else{
                        Vue.prototype.$message.error("保存出现错误");
                    }
                });
            },
            delOrg(){
                //查询是否和用户有关联
                let _this=this;
                let params={
                    form:_this.form,
                    checkedCities:_this.checkedCities
                }
                _this.$api.commonPost(this.$store.getters.path + "/queryUserOrg", params).then(res => {
                    if (res.status === "0"){
                        //和用户表有联系
                        _this.$confirm('该级或下级和用户有联系是否删除?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            _this.delete1();
                        }).catch(() => {
                            Vue.prototype.$message.success("已取消删除");
                        });
                    }else if (res.status === "9"){
                        //没有和用户表有联系
                        _this.delete2();

                    }
                });
            },
            delete1(){
                //有关系
                let _this=this;
                let param = {
                    form:_this.form,
                    withUser:2,
                    orgTreeData:_this.orgTreeData,
                    node:_this.form.orgid
                }
                _this.$api.commonPost(this.$store.getters.path+"/deleteOrg",param).then(function (res) {
                    if (res.status==="0"){
                        Vue.prototype.$message.success("删除成功");
                        _this.doInit();
                    }else {
                        Vue.prototype.$message.error("删除失败");
                    }
                })
            },
            delete2(){
                //没关系
                let _this=this;
                let param = {
                    form:_this.form,
                    withUser:2,
                    orgTreeData:_this.orgTreeData,
                    node:_this.form.orgid
                }
                _this.$api.commonPost(this.$store.getters.path+"/deleteOrg",param).then(function (res) {
                    if (res.status==="0"){
                        Vue.prototype.$message.success("删除成功");
                        _this.doInit();
                    }else {
                        Vue.prototype.$message.error("删除失败");
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .org  {
        /deep/ .el-main {
            padding: 0 10px;
        }
        /deep/ .el-card__header {
            padding: 5px 20px 15px;
        }
        /deep/ .el-checkbox+.el-checkbox {
            margin-left: 0px;
        }
        /deep/ .el-checkbox {
            margin-right: 30px;
        }
        /deep/ .el-scrollbar .el-scrollbar__wrap {
            overflow-x: hidden;
        }
        /deep/ .el-tree>.el-tree-node {
            display:inline-block;
            min-width: 194px;
        }
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .myheader {
        background-color: #f2f2f2;
        margin: -5px -20px -15px;
        padding: 5px 20px 5px;
    }
</style>
